這篇不長，倒是挺雷的

一個空容器，裡面放了一個 100x150 的色塊，並用遮罩遮成 100x100
Q：這時容器高度是多少？

選項1：100
選項2：150
選項3：都是

選項1 跟選項2 互斥，答案怎麼可能是3.
除非...條件不同...？

有點微妙的，答案是 3
差異是：看遮罩遮在哪

[ Demo ]

結構：

實現這個奇妙的結果

準備：繪製容器、繪製方塊、繪製遮罩的方法

function createContainer(name){
	const container = new PIXI.Graphics();
	container.name = name;
	return container;
};

function createBox(name){
	const box = new PIXI.Graphics();
	box.name = name;
	box.beginFill(0xff0000);
	box.drawRect(0, 0, 100, 150); // 方塊大小為 100 x 150
	box.endFill();
	return box;
};

function createMask(name){
	const mask = new PIXI.Graphics();
	mask.name = name;
	mask.beginFill(0x0);
	mask.drawRect(0, 0, 100, 100); // 遮罩大小為 100 x 100
	mask.endFill();
	return mask;
};

左邊容器、方塊與遮罩的寫法：

const container1 = createContainer("container1");
const box1 = createBox("box1");
const mask1 = createMask("mask1");

app.stage.addChild(container1);
container1.addChild(box1);
container1.addChild(mask1);

box1.mask = mask1;

container1.x = 50;
container1.y = 100;

左邊的層級為：

box1 的遮罩為 mask1
結果：container1 的高度為 100

右邊容器、方塊與遮罩的寫法：

const container2 = createContainer("container2");
const box2 = createBox("box2");
const mask2 = createMask("mask2");

app.stage.addChild(container2);
container2.addChild(box2);
app.stage.addChild(mask2);

container2.mask = mask2;

container2.x = 200;
container2.y = 100;
mask2.x = 200; // 由於右邊的遮罩與容器同層級，需再指定位置

mask2.y = 100;

右邊的層級為：

container2 的遮罩為 mask2
結果：container2 的高度為 150

container1 裝了被 高度100 的遮罩遮了的內容物，結果為 100
container2 裝了高度150 的內容物，所以 container2 的高度 是150

物件被遮罩遮時，看起來似乎是遮罩的大小，但實際上並不一定

延伸題：

此時的 app.stage 的高度為何?

答案：100。
理由與 container1 相同，container2 跟遮罩運算的結果為 100。

另一個常有的疑惑：遮罩要放在哪個層級?
是否可以跟被遮物不同層級?

以剛剛右邊的情形來說，結構是：

如果直接設定 box2.mask = mask2;
結果會是？

選項1：什麼都沒有
選項2：可以遮，高度為150(方塊高度)
選項3：可以遮，高度為100(遮罩高度)

答案：3。
可以跨層級遮，但我自己不常這麼做。

[ Demo ]

層級相同

微妙

本篇小結：將遮罩與被遮物放同層就好
不同層時可能可以顯示，但可能會有奇妙的問題